<template>
    <div>
      <el-card>
        <el-form inline>
          <el-form-item label="编码:" class="mgb-0">
            <el-input v-model="fnumber"></el-input>
          </el-form-item>
          <el-form-item label="名称:" class="mgb-0">
            <el-input v-model="fname"></el-input>
          </el-form-item>
          <el-form-item label="产品:" class="mgb-0">
            <mdm-material ref="search_material" v-model="fmaterialid"></mdm-material>
          </el-form-item>
          <el-form-item class="mgb-0">
            <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
            <el-button type="success" icon="el-icon-refresh" @click="clearData"></el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card style="margin-top: 10px">
        <div style="margin-bottom: 10px">
          <el-button type="primary" @click="openAdd">新增</el-button>
          <el-button type="primary" @click="batchStartUsing">启用</el-button>
          <el-button type="primary" @click="batchBan">禁用</el-button>
          <el-button type="danger" @click="batchDelete">删除</el-button>
        </div>
        <el-table border stripe :data="dataList"  v-loading="tableLoading" @row-click="handleRowClick" ref="iTable1">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column label="编码" prop="fnumber" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="名称" prop="fname" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="产品编码" prop="fmaterialnumber" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="产品名称" prop="fmaterialname" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="状态" prop="fstatus" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag v-if="scope.row.fstatus === 0" type="success">启用</el-tag>
                <el-tag v-if="scope.row.fstatus === 1" type="danger">禁用</el-tag>
              </template>
            </el-table-column>
          <el-table-column label="数量" prop="fqty" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="计量类型" prop="funittype" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="备注" prop="fdescription" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click.stop="openDetail(scope.row.fid)">详情</el-button>
              <el-button type="text" v-if="scope.row.fstatus === 1" @click.stop="openEdit(scope.row.fid)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float:right; margin: 10px 0;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 15, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          prev-text="上一页"
          next-text="下一页"
          :total="totalRows">
        </el-pagination>
    </el-card>
    <maPackAddEdit v-if="isShowAddEdit" :fid="fid" :status="status" @close="closeAddEdit"></maPackAddEdit>
    </div>
</template>

<script>
  import MaPackApi from '@/api/material/MaPackApi'
  export default {
    name: 'maPack_manage',
    components:{
      maPackAddEdit: resolve => require(['./components/maPack_addEdit'], resolve),
    },
    data(){
      return{
        fname : '',
        fnumber : '',
        tableLoading : false,
        dataList : [],
        page: 1, //当前页面
        pageSize : 10, // 当前页数
        totalRows : 0, // 总条数
        fid : null,
        isShowAddEdit : false,
        isShowDetail : false,
        maPackApi : new MaPackApi(),
        status : '',
        fmaterialid : null
      }
    },
    created(){
      this.getData()
    },
    methods:{
      getData(){
        this.tableLoading = true
        let data = {
          fname : this.fname,
          fnumber : this.fnumber,
          fmaterialid : this.fmaterialid,
          pageSize : this.pageSize,
          page : this.page,
        }
        this.maPackApi.queryListPage(data).then(res => {
          this.dataList = res.data.rows
          this.page = res.data.page
          this.pageSize = res.data.pageSize
          this.totalRows = res.data.totalRows
          this.tableLoading = false
        })
      },
      batchBan(){
        let _selectData = this.$refs.iTable1.selection;
        if(_selectData.length == 0){
          this.$tie.showError('请至少选择一条数据！')
          return
        }
        this.$confirm('已选择'+_selectData.length+'条数据，是否禁用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: `执行中，请耐心等待.....`,
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.maPackApi.batchBan(this.$tie.getFidList(_selectData)).then(res => {
            this.$tie.showSuccess(res.message)
            loading.close()
            this.getData()
          }).catch(e => {
            loading.close()
          });
        }).catch(() => {})
       
      },
      batchStartUsing(){
         let _selectData = this.$refs.iTable1.selection;
        if(_selectData.length == 0){
          this.$tie.showError('请至少选择一条数据！')
          return
        }
        this.$confirm('已选择'+_selectData.length+'条数据，是否启用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: `执行中，请耐心等待.....`,
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.maPackApi.batchStartUsing(this.$tie.getFidList(_selectData)).then(res => {
            this.$tie.showSuccess(res.message)
            loading.close()
            this.getData()
          }).catch(e => {
            loading.close()
          });
        }).catch(() => {})
      },
      batchDelete(){
        let _selectData = this.$refs.iTable1.selection;
        if(_selectData.length == 0){
          this.$tie.showError('请至少选择一条数据！')
          return
        }
        this.$confirm('已选择'+_selectData.length+'条数据，是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: `执行中，请耐心等待.....`,
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.maPackApi.batchDelete(this.$tie.getFidList(_selectData)).then(res => {
            this.$tie.showSuccess(res.message)
            loading.close()
            this.getData()
          }).catch(e => {
            loading.close()
          });
        }).catch(() => {})
      },
      // 当前页码修改时
      handleCurrentChange(page){
        this.page = page
        this.getData()
      },
      // 当前页数修改时
      handleSizeChange(pageSize){
        this.pageSize = pageSize
        this.getData()
      },
      searchData(){
        this.page = 1
        this.getData()
      },
      clearData(){
        //this.$refs.search_material.clean()
        this.fname = null
        this.fnumber = null

        this.fmaterialid=null
        
      },
      //打开新增弹窗
      openAdd(){
        this.fid = null
        this.status = 'add'
        this.isShowAddEdit = true
      },
      //打开编辑弹窗
      openEdit(id){
        this.fid = id
        this.status = 'edit'
        this.isShowAddEdit = true
      },
      handleRowClick(row,column,event){
        this.$refs.iTable1.toggleRowSelection(row)
      },
      //关闭新增编辑弹窗
      closeAddEdit(isOk){
        this.isShowAddEdit = false
        this.fid = null
        if(isOk){
            this.getData()
        }
      },
      //打开详情弹窗
      openDetail(id){
        this.fid = id
        this.status = 'view'
        this.isShowAddEdit = true
      },
    },
  }
</script>

<style scoped>

</style>
